/**
 * 指派人组件
 * @author mzl
 */

import React from 'react';
import './index.less';
import { Checkbox } from 'tinper-bee';
import CommonModal from '../../components/CommonModal/index.jsx';

class ApproveModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showModal: false,
            initAssign: [], // 原始数据
            assignPersonData: [], // 指派人数据
        };
        this.output = {
            initApproveModal: this.initApproveModal,
            closeApproveModal: this.closeApproveModal
        }
    }
    componentDidMount() {

    }

    componentWillUnmount() {

    }

    closeApproveModal = () => {
        this.setState({ showModal: false });
    }

    initApproveModal  = (data) => {
        if (data !== null && data.assignInfo && data.assignInfo.assignInfo.assignInfoItems[0].participants.length !== 1) {
            this.setState({
                showModal: true,
                initAssign: data,
                assignPersonData: data.assignInfo.assignInfo.assignInfoItems[0].participants,
            });
            return false;
        } else if (data !== null && data.assignInfo && data.assignInfo.assignInfo.assignInfoItems[0].participants.length === 1) {
            this.setState({
                showModal: true,
                initAssign: data,
                assignPersonData: data.assignInfo.assignInfo.assignInfoItems[0].participants,
            });
            this.handlerConfirm();
            return false;
        }
        return true;
    }

    getModalContext = () => {
        let { assignPersonData } = this.state;
        return assignPersonData ? (<div className="approval">
            <p className="approval-title">审批成员(多选)</p>
            <ul className="approval-list">
                {assignPersonData.map((item, index) => {
                    return <li key={item.id}>
                        <Checkbox checked={item.isChecked} onChange={() => this.changeCheck(index)}></Checkbox>
                        {item.name}
                    </li>
                })}
            </ul>
        </div>) : ''
    }

	changeCheck = (i) => {
		let { assignPersonData } = this.state;
		assignPersonData[i].isChecked = !assignPersonData[i].isChecked;
        this.setState({ assignPersonData});
    }

    handlerConfirm = () => {
        let paramArray = [];
        let { assignPersonData } = this.state;
		assignPersonData.forEach((item, index) => {
			if (item.isChecked) {
				paramArray.push(item);
			}
        })
        this.state.initAssign.assignInfo.assignInfo.assignInfoItems[0].participants = paramArray;
        this.props.handlerConfirm(this.state.initAssign);
    }

    render() {
        return (
            <CommonModal show={this.state.showModal}
                close={this.closeApproveModal}
                confirm={this.handlerConfirm}
                content={this.getModalContext()}
                backdrop={true}
                size='lg'
                title='选择审批人'
                oneButton={true}
                oneButtonText='确定'
                paramBtnClass=''
            >
            </CommonModal>
        )
    }
}



export default function YGCreateApproveModal(params) {
    return (
        <ApproveModal ref={child => this.approve = child} {...params} />
    )
}